import { each } from "lodash";
import React, { useState, useEffect, useMemo } from "react";
import { RendererPropTypes } from "@/visualizations/prop-types";
import resizeObserver from "@/services/resizeObserver";
import getChartData, { getParameter, getScheme } from "../getChartData";
import { prepareCustomChartData, createCustomEchartsRenderer } from "../plotly";
import $ from "jquery";

export default function CustomEcharts({ options, data, row, onClickHandler, onRefreshDashboardHandler, onRefreshWidgetHandler, onExpandDashboardHandler }) {
  const [container, setContainer] = useState(null);
  const [customCode, setCustomCode] = useState(options.customCode);

  const renderCustomEcharts = useMemo(() => createCustomEchartsRenderer(customCode, options.enableConsoleLogs), [
    customCode,
    options.enableConsoleLogs,
  ]);

  const plotlyData = useMemo(() => prepareCustomChartData(getChartData(data.rows, options)), [options, data]);
  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');

  useEffect(() => {
    if (container) {
      const unwatch = resizeObserver(container, () => {
        const scheme = getScheme(showPortal);
        const parameter = getParameter();

        require.ensure([], function(require) {
          import(/* webpackChunkName:"echarts-gl" */ 'echarts-gl');    
        }, 'echarts-gl');
        require.ensure([], function(require) {
          import(/* webpackChunkName:"echarts-wordcloud" */ 'echarts-wordcloud');    
        }, 'echarts-wordcloud');
        require.ensure([], function(require) {
          import(/* webpackChunkName:"echarts-liquidfill" */ 'echarts-liquidfill');    
        }, 'echarts-liquidfill');
        require.ensure([], function(require) {
          import(/* webpackChunkName:"echarts-bmap" */ 'echarts/dist/extension/bmap');    
        }, 'echarts/dist/extension/bmap');
        require.ensure([], function(require) {
          import(/* webpackChunkName:"echarts" */ 'echarts').then((echarts) => {    
            if (!window.$) window.$ = $;

            try {
              renderCustomEcharts(data && data.rows, plotlyData.x, plotlyData.ys, container, scheme, parameter, echarts, $,
                row || (data && data.rows && data.rows.length>0 && data.rows[0]), 
                options.clickEnabled ? onClickHandler : ()=>{}, 
                onRefreshDashboardHandler, onRefreshWidgetHandler, onExpandDashboardHandler);
            } catch (err) {
              if (options.enableConsoleLogs) console.log(`自定义ECharts错误: ${err}`); // eslint-disable-line no-console
            }  
          });
        }, 'echarts');
      });
      return unwatch;
    }
  }, [container, plotlyData, renderCustomEcharts, options, data, onClickHandler, onRefreshDashboardHandler, onRefreshWidgetHandler, onExpandDashboardHandler]);

  return <div className="chart-visualization-container" ref={setContainer} 
    style={showPortal ? {background:"#00000000", color: localStorage.getItem('colorstyle_color')} : null} />;
}

CustomEcharts.propTypes = RendererPropTypes;
